﻿@inherits DemoWithResizableComponent

<div class="demo-description" id="NullText">
    <h2>
        <DemoNavLink Link="ComboBox#NullText" />ComboBox - NullText
    </h2>
    <p>
        This demo illustrates how to use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxComboBox-2.NullText">NullText</a> property to display the placeholder text in the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxComboBox-2">ComboBox</a> when its value is null.
    </p>
    <p>
        Set the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DataEditorClearButtonDisplayMode">ClearButtonDisplayMode</a> property to <b>Auto</b> to display the <b>Clear</b> button when the ComboBox has a non-null value. Users can click this button to clear the editor's value (set it to null).
    </p>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode" Title="Select a value"/>
    </div>

    <div class="card-body mw-480">
        <DxComboBox NullText="Select a country..."
                    Data="@CountryCity.Countries"
                    @bind-Value="@CurrentCountry"
                    TextFieldName="@nameof(Country.CountryName)"
                    ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
                    SizeMode="SizeMode"></DxComboBox>
    </div>
</div>

<CodeSnippet_Editor_ComboBox_NullText></CodeSnippet_Editor_ComboBox_NullText>

@code {
    Country CurrentCountry { get; set; } = CountryCity.Countries[1];
}
